Flex觀念

Flex把所有的排版分為主軸，和與主軸垂直相交的交錯軸，軸向決定後面的CSS寫法。

所以Flex可以垂直排版，但要注意支援度。

Flex規則

display:flex;

設定Flex排版時必備，定義版面以Flex方式排版。

flex-direction

定義flex的軸向，預設主軸是左至右的橫軸。

可以設定的值有四個：

1. row：預設值，左至右的橫向排版
2. column：上至下的縱向排版
3. row-reverse：橫向排版，但是從右至左的反向排版
4. column-reverse：縱向排版，但是從下至上的反向排版

justify-content

主軸的對齊方式，也可以調整主軸物件的間距。

可以設定的值有五個：

1. flex-start：物件全部往主軸方向的起始處對齊
2. flex-end：物件全部往主軸方向的終點處對齊
3. center：物件全部往主軸方向的中央對齊
4. between：物件第一個和最後一個往邊緣貼齊，其餘物件平分剩餘空間，所以如果是五個物件，只會有三個間隙
5. space-around：物件平分所有空間，所有物件間的間距會相同，主軸的兩側也會算在間距中

align-items

交錯軸的對齊方式。

可以設定的值有五個：

1. flex-start：物件全部往交錯軸方向的起始處對齊
2. flex-end：物件全部往交錯軸方向的終點處對齊
3. center：物件全部往交錯軸方向的中央對齊
4. baseline：物件不改高度，以文字為對齊軸線對齊
5. stretch：所有物件和交錯軸等高

align-self

交錯軸單一物件的對齊方式，可以設定的值和align-items相同，但只作用在一個物件上。

Bootstrap中常用的Flex Class

Bootstrap中的Flex Class寫法和平常在CSS上的寫法非常像，所以不要混淆。

另外，下方的(size)部分是可以省略的，如果不想省略，可以選擇的值有sm、md、lg、xl四種。

display:flex;

.d-(size)-flex屬性

ex：

<div class="d-flex">......</div>

flex-direction

Class寫法為：

.flex-(size)-direction屬性

ex：

<div class="d-flex flex-row-reverse">......</div>

justify-content

Class寫法為：

.flex-(size)-justify-content屬性

要注意的是，在寫flex-start、flex-end兩個值時，記得省略flex不寫。

ex：

<div class="d-flex justify-content-start">......</div>

align-items、align-self

Class寫法為：

.flex-(size)-align-items屬性
.flex-(size)-align-self屬性

和上面的justify-content一樣，在寫flex-start、flex-end兩個值時，記得省略flex不寫。

ex：

<div class="d-flex align-items-start">......</div>
<div class="d-flex align-self-start">......</div>